<script lang="ts" setup>
  import { ref, computed } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdateNoticeDepartment } from '@/api/notice'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import BasicEditor from '@/components/BasicEditor/index.vue';

  interface Props {
    data?: any
  }

  const props = withDefaults(defineProps<Props>(), {
    data: ()=>({
      
    }),
  })

  const form = ref<any>(cloneDeep(props.data) || {})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])

  const editorContainer = ref(null);
  const editor = ref()

  const rules: FormRules = {
    title: [
      { required: true, message: '请输入标题', trigger: 'change' },
    ],
    type: [
      { required: true, message: '请输入类型', trigger: 'change' },
    ],
    noticeContent: [
      { required: true, message: '请输入内容', trigger: 'change' },
    ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})

  const cancel = ()=>{
    emit('cancel')
  }

  const success = ()=>{
    handleSubmit(saveOrUpdateNoticeDepartment, formRef.value, form.value, dialogRef.value)
  }


</script>

<template>
  <gm-dialog
    :width="1000"
    ref="dialogRef"
    title="新增/编辑通知公告系列"
    @cancel="cancel"
    @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item  prop="title" label="标题">
        <el-input v-model="form.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item  prop="type" label="类型">
        <el-select clearable v-model="form.type" placeholder="请选择">
          <el-option label="通知公告" :value="0"></el-option>
          <el-option label="规章制度" :value="1"></el-option>
          <el-option label="表彰公告" :value="2"></el-option>
          <el-option label="处罚公告" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="noticeContent" label="内容">
        <BasicEditor v-model="form.noticeContent"></BasicEditor>

        
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>


<style lang="scss" scoped>
</style>
